<template>
  <div>
    <el-upload
      :limit="limit"
      list-type="picture-card"
      :file-list="values"
      accept="image/*"
      :multiple="true"
      :auto-upload="true"
      class="avatar-uploader"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :http-request="handleRequest"
      :class="{ hideUploadButton: values.length === limit ? true: false }"
      action="https://jixiang.yunhanchun.com.cn/admin-api/admin/upload/image"
    >
      +
    </el-upload>
    <el-dialog v-model="dialogVisible" :append-to-body="true">
      <div class="text-center">
        <img :src="dialogImageUrl" alt style="max-width: 100%" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch, toRefs, onMounted } from "vue";
import axios from "axios";

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  imgSrcs: {
    type: String,
    default: "",
  },
  limit: {
    type: Number,
    default: 3,
  },
});

let srcArray = ref([]);
let values = ref([]);
let hasChanged = ref(false);
let dialogVisible = ref(false);
let dialogImageUrl = ref("")

const $emit = defineEmits(["change", "ocrCallback", "changeRemove","update:modelValue"]);

const handleRequest = (params) => {
  const formData = new FormData();
  formData.append("multipart", params.file);
  formData.append("model", "wechat");
  formData.append("pid", "8");
  return axios
    .post(params.action, formData, {
      headers: { "Content-Type": "multipart/form-data" },
    })
    .then((res) => {
      if (res.data.code == 200) {
        srcArray.value.push(res.data.data.url);
        values.value.push(res.data.data.url);
        hasChanged.value = false;
        $emit("update:modelValue", srcArray.value.join(","));
        $emit("change", srcArray.value.join(","));
        $emit("ocrCallback", res.data.data);
      }
    })
    .catch((err) => {
      console.error(err);
    });
};

onMounted(() => {
  calArr();
});

watch(()=>props.modelValue, () => {
  if (hasChanged.value) {
    return;
  }
  calArr();
});

const calArr = () => {
  if (props.modelValue) {
    srcArray.value = props.modelValue.split(",");
    values.value = srcArray.value.map((el) => ({ url: el }));
    console.log("values.value-",values.value)
  } else {
    srcArray.value = [];
    values.value = [];
  }
};
const handleRemove = (file, fileList) => {
  const idx = srcArray.value.findIndex((el) => file.url.endsWith(el));
  if (idx != -1) {
    srcArray.value.splice(idx, 1);
    values.value.splice(idx, 1);
    hasChanged.value = true;
    $emit("change", srcArray.value.join(","));
    $emit("changeRemove", file.url);
  }
};
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};
</script>

<style>
.hideUploadButton .el-upload{
  display: none !important;
}
</style>
<style scoped>
.add-btn {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-size: 10px;
  border-radius: 2px;
  border: 1px solid #eaeaf2;
  cursor: pointer;
}
.tabbar {
  position: fixed;
  bottom: 0;
}
</style>
